<template>
	<view>
		<view class="meirishjuss">
			<view class="meirishju_row">
				<view class="linstrsd"></view>
				<view class="meirishju_name">
					客户统计
				</view>
				<view class="meirishju_dw">
					单位：人
				</view>
			</view>
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :canvas2d="true" :ontouch="true" class="iasmdafa" />
		</view>
		<view class="ranking_flex" v-for="(item,index) in shujuList" :key="index">
			<view class="iasmdadaf">
				<image src="https://star.googom.cn/chuangge/diyiming.png" mode="" class="diyiming" v-if="index == 0"></image>
				<image src="https://star.googom.cn/chuangge/diermimhg.png" mode="" class="diyiming" v-if="index == 1"></image>
				<image src="https://star.googom.cn/chuangge/disanming.png" mode="" class="diyiming" v-if="index == 2"></image>
				<view class="asdiafa" v-if="index > 3 || index == 3">
					<image src="https://star.googom.cn/chuangge/tops.png" mode="" class="tops"></image>
					<view class="asdiafa_inds">
						{{index+1}}
					</view>
				</view>
				<image src="/static/images/avater.png" mode="" class="avater"></image>
				<view class="ranking_cloum">
					<view class="ranking_cloum_row">
						<view class="roiw_name">
							{{item.consultantName}}
						</view>
						<view class="wpuid_wo" v-if="item.consultantName == userinfosadd.nickName">
							我
						</view>
					</view>
					<view class="weizhdi">
						{{item.postName}}
					</view>
				</view>
			</view>
			<view class="ran_cloumser">
				<view class="ran_cloumser_name">
					{{item.totalBase}}
				</view>
				<view class="ran_cloumser_names">
					客户数
				</view>
			</view>
		</view>
		<view class="bolck"></view>
	</view>
</template>

<script>
	import imageutil from '@/common/config.js'
	export default {
		data() {
			return {
				dayinfasd:'',
				shujuList:[],
				userinfosadd:{},
				imageUrl: imageutil.configURL,
				projectnameid:0,
				chartData: {},
				opts: {
					color: ["#05CF67", "#A89AD7"],
					 padding: [15,15,0,5],
					        touchMoveLimit: 24,
					        enableScroll: true,
					        legend: {},
					        xAxis: {
					          disableGrid: true,
					          scrollShow: true,
					          itemCount: 6
					        },
					        yAxis: {
					          data: [
					            {
					              min: 0
					            }
					          ]
					        },
					extra: {
						column: {
							seriesGap: 5,
							barBorderCircle: true,
							type: "group",
							width: 16,
						}
					}
				},
			}
		},
		onShow() {
			this.projectnameid = uni.getStorageSync('projectnameid');
			//排行榜
			this.getrankingLists()
			//获取当前年
			this.getFormattedDate()
			//排行榜柱状图
			this.getresultsStatss()
			
		},
		methods: {
			//获取当前时间
			getFormattedDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，转为1-12并补零
				const day = String(date.getDate()).padStart(2, '0'); // 日期补零
				this.dayinfasd = `${year}`
			},
			//查询排行榜
			async getrankingLists() {
				var that = this
				let data = await that.$api.getrankingList({
					category:7,
					projectId:this.projectnameid,
				});
				if (data.code == 200) {
					this.shujuList = data.data
					//个人信息
					this.getuserInfos()
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//个人信息
			async getuserInfos(){
				var that = this
				let data = await that.$api.getprofile();
				if (data.code == 200) {
					that.userinfosadd = data.data
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//排行榜柱状图
			async getresultsStatss(){
				var that = this
				let data = await that.$api.getresultsStats({
					category:7,
					projectId:that.projectnameid,
					year:that.dayinfasd,
					type:"month",
				});
				if (data.code == 200) {
					var datadlist = data.data
					var riqiList = []
					var shujuList = []
					for (var i = 0; i < datadlist.length; i++) {
						riqiList.push(datadlist[i].months)
					}
					for (var i = 0; i < datadlist.length; i++) {
						shujuList.push(datadlist[i].count)
					}
					let res = {
						categories: riqiList,
						series: [{
							name: "客户",
							data: shujuList
						}]
					};
					that.chartData = JSON.parse(JSON.stringify(res));
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
		}
	}
</script>



<style lang="scss">
	.iasmdafa {
		width: 690rpx;
		margin-left: 10rpx;
	}
	.meirishjuss {
		width: 702rpx;
		border-radius: 20rpx;
		background: #F5F7FB;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding-bottom: 15rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.meirishju_row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;
			margin-bottom: 30rpx;

			.linstrsd {
				width: 4rpx;
				height: 32rpx;
				border-radius: 116rpx;
				background: #05CF67;
				margin-left: 24rpx;
			}

			.meirishju_name {
				font-size: 30rpx;
				font-weight: bold;
				color: #08112C;
				margin-left: 12rpx;
			}

			.meirishju_dw {
				font-size: 26rpx;
				color: #485A75;
				margin-left: 12rpx;
			}
		}
	}

	.ranking_flex {
		width: 702rpx;
		height: 140rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1rpx solid #EBEEF5;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 24rpx;

		.iasmdadaf {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.diyiming {
				width: 48rpx;
				height: 48rpx;
				margin-left: 16rpx;
			}

			.avater {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-left: 16rpx;
			}

			.ranking_cloum {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				margin-left: 20rpx;

				.ranking_cloum_row {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.roiw_name {
						font-size: 32rpx;
						font-weight: bold;
						color: #08112C;
					}

					.wpuid_wo {
						width: 48rpx;
						height: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 6rpx;
						background: #05CF67;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 20rpx;
					}
				}

				.weizhdi {
					font-size: 24rpx;
					color: #7C849C;
					margin-top: 8rpx;
				}
			}
		}

		.ran_cloumser {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			margin-right: 40rpx;

			.ran_cloumser_name {
				font-size: 36rpx;
				font-weight: bold;
				color: #08112C;
			}

			.ran_cloumser_names {
				font-size: 24rpx;
				color: #7C849C;
				margin-top: 4rpx;
			}
		}
	}
	.asdiafa{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-left: 16rpx;
		.tops{
			width: 48rpx;
			height: 20rpx;
		}
		.asdiafa_inds{
			width: 48rpx;
			height: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #08112C;
		}
	}
</style>